<template>
	<view class="">
		<view class="m2432">
			<view class="flex_btw">
				<view class="fw600 fs32 c2a7">基础信息</view>
				<view class="eitd fw500 fs28" @click="eitdPickPerson">修改</view>
			</view>
			<view class="mt24 p24 bgf br12">
				<view class="flex_x mb24">
					<view class="c3 fw500 fs28 w120">姓名</view>
					<view class="ml50 flex1 ipt flex_x plr20">
						<u--input placeholder="请输入姓名" inputAlign='center' clearable border="none"
							v-model="from.username">
						</u--input>
					</view>
				</view>
				<view class="flex_x mb24">
					<view class="c3 fw500 fs28 w120">联系方式</view>
					<view class="ml50 flex1 ipt flex_x plr20">
						<u--input placeholder="请输入联系方式" inputAlign='center' clearable border="none"
							v-model="from.mobile">
						</u--input>
					</view>
				</view>
				<view class="flex_x">
					<view class="c3 fw500 fs28 w120">负责区域</view>
					<view class="ml50 flex1 ipt flex_x plr20" @click="show_city = true">
						<u--input placeholder="请输入负责区域" disabled disabledColor='#F4F4F4' inputAlign='center' clearable
							border="none" v-model="from.city">
						</u--input>
					</view>
				</view>
			</view>

		</view>
		<view class="">
			<hintPopup :show.sync="show" hint='确认修改' title='你确定要修改信息吗？' color="#2A71C0" @confirm='confirm'>
			</hintPopup>
			<hintBox :show.sync="hintShow" title='提交成功' color='#2A71C0' :time='1500'></hintBox>

			<u-picker :show="show_city" :columns="columns" keyName="value" closeOnClickOverlay
				@close="show_city = false" @cancel="show_city = false" @confirm='confirmCity'></u-picker>
		</view>

	</view>
</template>

<script>
	import chengDu from './chengDu.js'
	export default {
		components: {},
		data() {
			return {
				show: false, //确认弹窗
				hintShow: false, //完成提示框

				show_city: false, //选择地址弹窗
				columns: [chengDu], //成都地址文件

				from: { //用户信息
					username: '', //姓名
					mobile: '', //联系方式
					city: '', //负责区域
				}
			}
		},
		onLoad() {
			this.from.username = this.user.nickname
			this.from.mobile = this.user.mobile
			this.from.city = this.user.city

		},
		onShow() {

		},
		methods: {
			confirmCity(e) { //确定选项地址
				// console.log(e);
				this.from.city = e.value[0].value
				this.show_city = false
			},
			eitdPickPerson() { //修改按钮
				if (!this.from.username) {
					uni.$u.toast('请输入姓名')
				} else if (!this.from.mobile) {
					uni.$u.toast('请输入联系方式')
				} else if (!/^(?:(?:\+|00)86)?1\d{10}$/.test(this.from.mobile)) {
					uni.$u.toast('请输入正确的联系方式')
				} else if (!this.from.city) {
					uni.$u.toast('请选择你负责的区域')
				} else {
					this.show = true
				}
			},
			confirm() { //确认修改
				this.$u.debounce(this.eitdProfile, 500) //防抖
			},
			eitdProfile() { //修改资料接口
				this.$api.eitdProfile(this.from).then(res => {
					if (res.code == 1) {
						this.getUser()
						this.hintShow = true
					} else {
						uni.$u.toast(res.msg)
					}
					this.show = false

				})
			}
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.eitd {
		color: #FF8C0A;
	}

	.ipt {
		height: 84upx;
		background: #F4F4F4;
		border-radius: 12upx;
	}
</style>
